<template>
  <div>
    <div class="box">
      <div class="title_box">
        <div class="title">账 户</div>
      </div>
      <div class="bigBox">
        <div class="number_logo">
          <div class="myAccount">我的账户<i class="el-icon-view"></i></div>
          <div class="number">{{ phoneNumber | phoneFilter }}</div>
        </div>
        <div class="logo">
          <div class="Logo1"><img src="初始化.png" alt="" />初始化</div>
        </div>
      </div>
      <div class="table1">
        <div class="card">
          <div class="left">
            <div class="totalAssets_key">资产总值</div>
            <div class="totalAssets_value">{{ totalAssets }}</div>
          </div>
          <div class="center">
            <div class="marketValue_key">证券市值</div>
            <div class="marketValue_value">{{ marketValue }}</div>
          </div>
          <div class="right">
            <div class="availableFunds_key">可用资金</div>
            <div class="availableFunds_value">{{ availableFunds }}</div>
          </div>
        </div>
      </div>
      <div class="accountCheck">
        <img src="火.png" alt="" class="huo_logo" />
        <div>账户检测</div>
      </div>
      <div class="table2">
        <div class="account_data">
          <div class="data_key"><i class="el-icon-lock"></i>冻结资金</div>
          <div class="data_value" style="color: #fcff00">
            {{ freezingFunds }}
          </div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-money"></i>资金余额</div>
          <div class="data_value">{{ fundBalance }}</div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-user"></i>账号</div>
          <div class="data_value">{{ phoneNumber | phoneFilter }}</div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-edit-outline"></i>姓名</div>
          <div class="data_value" style="color: #ffffff">{{ Name }}</div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-coin"></i>持仓市值</div>
          <div class="data_value">{{ marketValueOfPosition }}</div>
        </div>
        <div class="account_data">
          <div class="data_key" style="margin-bottom: 0">
            <i class="el-icon-data-line"></i>持仓利润
          </div>
          <div class="data_value" style="color: #ee0002">
            {{ positionProfit }}
          </div>
        </div>
      </div>
      <div class="table3">
        <div class="shanghai">
          <div class="big_title">上海股东</div>
          <div class="small_title">虚拟号码</div>
        </div>
        <div class="shenzhen">
          <div class="big_title">深圳股东</div>
          <div class="small_title">虚拟号码</div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <footer>
      <div class="menu1">
        <img src="账户.png" alt="" />
        <div>账户</div>
      </div>
      <div class="menu2">
        <img src="任务.png" alt="" />
        <div>任务</div>
      </div>
      <div class="menu3">
        <img src="交易.png" alt="" />
        <div>交易</div>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phoneNumber: '15030369800',
      totalAssets: '995941.47',
      marketValue: '149920.00',
      availableFunds: '846021.47',
      freezingFunds: '0.00',
      fundBalance: '846021.47',
      Name: '系统仿真账户',
      marketValueOfPosition: '159640.00',
      positionProfit: '3328.00'
    }
  },
  filters: {
    phoneFilter(val) {
      const reg = /^(.{9}).*(.{0})$/
      return val.replace(reg, '$1$2**')
    }
  }
}
</script>
